oa.view.rf.shadeSquareParts = {
/**
 * Render the structure of an ShadeSquareParts
 *
 * @author Bogdan Cataron
 * @param {ArithmeticProblem} ap  An arithmetic problem.
 */
render: function( ap) {
  var el = {};
  var rB = document.getElementById("renderBox");
  var apDivEl = dom.createDiv("shadeSquareParts");
  var restSquare = dom.createDiv("restSquare");
  var inputFraction = dom.createDiv("inputFrac","fraction");
  var btnWrapper = dom.createDiv("btnWrapper","moveButtonUp");
  apDivEl.setAttribute("data-nmrofops", ap.type.operators.length);
  rB.appendChild(apDivEl);
  // rightPart
  //given fraction
  el = dom.createDiv("forFraction","fraction");
  restSquare.appendChild(el);
  // equality symbol
  el = dom.createDiv("equalitySymbol","operatorFraction");
  el.innerHTML = "=";
  restSquare.appendChild(el);  
  // fraction input for testing the result
  // numerator
  el = document.createElement("input");
  el.setAttribute("type", "hidden");
  el.setAttribute("class", "operand");
  el.setAttribute("name", "numerator");
  el.setAttribute("id", "askedForNum");
  el.addEventListener("input", oa.view.rf.shadeSquareParts.handleUserInputFractionChooser, false);
  inputFraction.appendChild(el); 
  // slash
  el = document.createElement("hr");
  el.setAttribute("class", "slash");
  inputFraction.appendChild(el);   
  // denominator
  el = document.createElement("input");
  el.setAttribute("type", "hidden");
  el.setAttribute("class", "operand");
  el.setAttribute("name", "denominator");
  el.setAttribute("id", "askedForDenom");
  el.addEventListener("input", oa.view.rf.shadeSquareParts.handleUserInputFractionChooser, false);
  inputFraction.appendChild(el);
  restSquare.appendChild( inputFraction);
  // - button for split
  el = dom.createButton("decreaseButton","none","-");
  el.setAttribute("title","Decrease number of divisions");
  el.addEventListener("click", oa.view.rf.shadeSquareParts.decreaseDivision, false); 
  restSquare.appendChild(el);	
  // + button for split
  el = dom.createButton("increaseButton","none","+");
  el.setAttribute("title","Increase number of divisions");
  el.addEventListener("click", oa.view.rf.shadeSquareParts.increaseDivision, false); 
  restSquare.appendChild(el);
  // Square place 
  el = dom.createDiv("PositionOfSquare");
  restSquare.appendChild( el);
  // - button for shade
  el = dom.createButton("decreaseShadeButton","green","-");
  el.setAttribute("title","Decrease number of shaded parts");
  el.addEventListener("click", oa.view.rf.shadeSquareParts.decreaseShadeSquareButton, false); 
  restSquare.appendChild(el);	
  // + button for shade
  el = dom.createButton("increaseShadeButton","green","+");
  el.setAttribute("title","Increase number of shaded parts");
  el.addEventListener("click", oa.view.rf.shadeSquareParts.increaseShadeSquareButton, false); 
  restSquare.appendChild(el);
  // configure the submit/continue button
  el = dom.createButton("submitButton","blue","?");
  el.addEventListener("click", oa.view.rf.shadeSquareParts.handleFractionChooserSubmitNew, false);    
  btnWrapper.appendChild( el);
  restSquare.appendChild( btnWrapper);
  apDivEl.appendChild(restSquare);
  document.addEventListener("keypress", oa.view.handleKeyPressFractionChooser, true);
},
/**
 * Fill an already rendered problem equation with new values for operands and result
 *
 * @author Bogdan Cataron
 * @param {ArithmeticProblem} ap  An arithmetic problem.
 */
fill: function( ap) {
  var principal = document.getElementById("forFraction");
  var givenFraction = dom.createDiv("givenF","fraction");
  // numerator
  var el = dom.createSpan("numerator1","operand",ap.result[0]);
  givenFraction.appendChild(el);
  // slash
  el = document.createElement("hr");
  el.setAttribute("class", "slash");
  givenFraction.appendChild(el);  
  // denominator
  el = dom.createSpan("denominator1","operand",ap.result[1]);
  givenFraction.appendChild(el);
  principal.appendChild(givenFraction);
  //keep the final result
  finalResult = new Array();
  finalResult[0] = ap.result[0];
  finalResult[1] = ap.result[1];
  fractia = new Array();
  fractia[0] = 0;   //will be the computed num
  fractia[1] = 1 ;  //will be the computed denominator  
  //here we delete the old fraction and append a new one 
  princip = document.getElementById("forFraction");
  while (princip.firstChild)
  princip.removeChild(princip.firstChild);
  //add new one
  princip.appendChild(givenFraction);  
  //first call of function divideSquare for append an empty square
 oa.view.rf.shadeSquareParts.divideSquare(fractia[0], fractia[1]);
}
};
//Function for divide and shade the square using the computed parameters
oa.view.rf.shadeSquareParts.divideSquare = function (num, den ){
  var xmlns = "http://www.w3.org/2000/svg";
  var width = 200;
  var height = 200;
  var rectWidth = 0;
  var rectHeight = 0;
  //in z we keep an int number between 1 and 7...to use function "backgroundColors" and also we return only odd numbers for Z because the colors are more powerful
  var z;
  if (fractia[1] > 7) {
	z = fractia[1] - 2;
	if (z % 2 == 0) {
	  z = z+1;
	}	
  }else{
    z = fractia[1];
	if (z % 2 == 0) {
	  z = z + 1;
    }	
  }
  var fillColor;
  emptyColor = "none";
  //here we create an SVG 
  var svg = document.createElementNS( xmlns, "svg");
  svg.setAttribute("version", "1.1");
  svg.setAttribute("width", width);
  svg.setAttribute("height",height);
  //if the denominator is multiple of 2, that means we can put those parts of the Square on two lines 
  if (den % 2 == 0) {
	var sx = 0;
	var sy = 0;
	nrParts = den / 2;
	verticalDistance = width / nrParts;
	horizontalDistance = height / 2;
	rectWidth = verticalDistance;
	rectHeight = horizontalDistance;
	//for every line of the main square
	for (var j=1; j<=2; j++) {
	  // here we construct a part of the Square (rect ) using the computed startX, startY and new width and height
	  //if we still have to paint parts of the Square, we use the fillColor in the Attribute "fill" and decrease the number of remaining parts to shade 
	  if (num > 0) {
		fillColor = oa.view.backgroundColors[z];
		oa.view.rf.shadeSquareParts.createRect(sx, sy, rectWidth, rectHeight,fillColor);
		svg.appendChild(el);
		num = num - 1;
		//if we painted enough parts of the Square, we use the emptyColor in the "fill" Attribute 
	  }else{
		fillColor = emptyColor;
		oa.view.rf.shadeSquareParts.createRect(sx, sy, rectWidth, rectHeight,fillColor);
		svg.appendChild(el);
	  }
	  for (var i=1; i<nrParts; i++) {
		//here we construct and append the remaining rectangles from the line
	    sx = sx + verticalDistance;
		// here we construct a part of the Square (rect ) using the computed startX, startY and new width and height
		//if we still have to paint parts of the Square, we use the fillColor in the Attribute "fill" and decrease the number of remaining parts to shade 
		if (num > 0) {
		  fillColor = oa.view.backgroundColors[z];
		  oa.view.rf.shadeSquareParts.createRect(sx, sy, rectWidth, rectHeight,fillColor);
		  svg.appendChild(el);
		  num = num - 1;
		  //if we painted enough parts of the Square, we use the emptyColor in the "fill" Attribute 
		}else{
		  fillColor = emptyColor;
		  oa.view.rf.shadeSquareParts.createRect(sx, sy, rectWidth, rectHeight,fillColor);
	      svg.appendChild(el);	
		}
	  }
	  //go to the next line of rectangles from the main square
	  sx = 0;
	  sy = sy + horizontalDistance;
	}
   //if the denominator is multiple of 3, that means we can put those parts of the Square on 3 lines 
  } else if (den % 3 == 0) {
	var sx = 0;
	var sy = 0;
	nrParts = den / 3;
	verticalDistance = width / nrParts;
	horizontalDistance = height / 3;
	rectWidth = verticalDistance;
	rectHeight = horizontalDistance;
	//for every line of the main square
	for (var j=0; j<3; j++) {
	  // here we construct a part of the Square (rect ) using the computed startX, startY and new width and height
	  //if we still have to paint parts of the Square, we use the fillColor in the Attribute "fill" and decrease the number of remaining parts to shade 
	  if (num > 0) {
		fillColor = oa.view.backgroundColors[z];
		oa.view.rf.shadeSquareParts.createRect(sx, sy, rectWidth, rectHeight,fillColor);
		svg.appendChild(el);
		num = num - 1;
	    //if we painted enough parts of the Square, we use the emptyColor in the "fill" Attribute 
	  }else{
		fillColor = emptyColor;
		oa.view.rf.shadeSquareParts.createRect(sx, sy, rectWidth, rectHeight,fillColor);
		svg.appendChild(el);
	  }
	  for (var i=1; i<nrParts; i++) {
		//here we construct and append the remaining rectangles from the line
		sx = sx + verticalDistance;
		// here we construct a part of the Square (rect ) using the computed startX, startY and new width and height
		//if we still have to paint parts of the Square, we use the fillColor in the Attribute "fill" and decrease the number of remaining parts to shade 
		if (num > 0) {
	   	  fillColor = oa.view.backgroundColors[z];
		  oa.view.rf.shadeSquareParts.createRect(sx, sy, rectWidth, rectHeight,fillColor);
		  svg.appendChild(el);
		  num = num - 1;
	      //if we painted enough parts of the Square, we use the emptyColor in the "fill" Attribute 
		}else{
		  fillColor = emptyColor;
		  oa.view.rf.shadeSquareParts.createRect(sx, sy, rectWidth, rectHeight,fillColor);
		  svg.appendChild(el);
		}
	  }
	  //go to the next line of rectangles from the main square
	  sx = 0;
	  sy = sy + horizontalDistance;
	}
	//if it is a prime number (ex. 5, 7), we have only one line with X columns where X is the given number
  }else{
	var sx = 0;
	var sy = 0;
	nrParts = den;
	verticalDistance = width / nrParts;
	horizontalDistance = height;
	rectWidth = verticalDistance;
	rectHeight = horizontalDistance;
	// here we construct a part of the Square (rect ) using the computed startX, startY and new width and height
	//if we still have to paint parts of the Square, we use the fillColor in the Attribute "fill" and decrease the number of remaining parts to shade 
	if (num > 0) {
   	  fillColor = oa.view.backgroundColors[z];
	  oa.view.rf.shadeSquareParts.createRect(sx, sy, rectWidth, rectHeight,fillColor);
	  svg.appendChild(el);
	  num = num - 1;
	//if we painted enough parts of the Square, we use the emptyColor in the "fill" Attribute 
	}else{
	  fillColor = emptyColor;
	  oa.view.rf.shadeSquareParts.createRect(sx, sy, rectWidth, rectHeight,fillColor);
	  svg.appendChild(el);
	}
	for (var i=1; i<nrParts; i++) {
	  //here we construct and append the remaining rectangles from the line
	  sx = sx + verticalDistance;
	  // here we construct a part of the Square (rect ) using the computed startX, startY and new width and height
	  //if we still have to paint parts of the Square, we use the fillColor in the Attribute "fill" and decrease the number of remaining parts to shade 
	  if (num > 0) {
		fillColor = oa.view.backgroundColors[z];
		oa.view.rf.shadeSquareParts.createRect(sx, sy, rectWidth, rectHeight,fillColor);
		svg.appendChild(el);
		num = num - 1;
		//if we painted enough parts of the Square, we use the emptyColor in the "fill" Attribute 
	  }else{
		fillColor = emptyColor;
		oa.view.rf.shadeSquareParts.createRect(sx, sy, rectWidth, rectHeight,fillColor);
		svg.appendChild(el);
	  }
	}
  }
  //delete previous square
  square = document.getElementById("PositionOfSquare");
  while (square.firstChild)
  square.removeChild(square.firstChild);
  //add new one
  square.appendChild(svg);
};

//functions for computing the denominator 
//when the "+" button is pressed,the denominator is increased (number of parts)
oa.view.rf.shadeSquareParts.increaseDivision = function(){
  if (fractia[1] < 9) {
	fractia[1] = fractia[1] + 1;
	fractia[0] = 0;
	oa.view.rf.shadeSquareParts.divideSquare(fractia[0], fractia[1]); 
  }else{
	fractia[0] = 0;
	oa.view.rf.shadeSquareParts.divideSquare(fractia[0], fractia[1]); 
  }
};

//when the "-" button is pressed,the denominator is decreased (number of parts)
oa.view.rf.shadeSquareParts.decreaseDivision = function (){
  if (fractia[1] == 1) {
	fractia[0]=0;
	oa.view.rf.shadeSquareParts.divideSquare(fractia[0], fraction[1]); 
  }else{
	fractia[1] = fractia[1] -1;
	fractia[0] = 0;
	oa.view.rf.shadeSquareParts.divideSquare(fractia[0], fractia[1]);
  }
};

//function for change the color of pieces of Square (increase the number of shaded parts)
oa.view.rf.shadeSquareParts.increaseShadeSquareButton = function(){
  if (fractia[1] > fractia[0]) {
	fractia[0] = fractia[0] + 1;  
	document.getElementById("askedForNum").value = fractia[0];
	document.getElementById("askedForDenom").value = fractia[1];
	oa.view.rf.shadeSquareParts.divideSquare(fractia[0], fractia[1]);
  }else{
	oa.view.rf.shadeSquareParts.divideSquare(fractia[0], fractia[1]);
  }
};
//function for change the color of pieces of Square (decrease the number of shaded parts)
oa.view.rf.shadeSquareParts.decreaseShadeSquareButton = function(){
  if (fractia[0] > 0) {
	fractia[0] = fractia[0] - 1;
	document.getElementById("askedForNum").value = fractia[0];
	document.getElementById("askedForDenom").value = fractia[1];
	oa.view.rf.shadeSquareParts.divideSquare(fractia[0], fractia[1]);
  }else{
	oa.view.rf.shadeSquareParts.divideSquare(fractia[0], fractia[1]);
  }
};
//function for creating rect parts of the main Square
oa.view.rf.shadeSquareParts.createRect = function(sx, sy, rectWidth, rectHeight, fillColor) {
 var xmlns = "http://www.w3.org/2000/svg";
 el = document.createElementNS(xmlns, "rect");
 el.setAttribute("x", sx);
 el.setAttribute("y", sy);
 el.setAttribute("id","square"+sx+sy+rectWidth+rectHeight+fillColor);
 el.setAttribute("width", rectWidth);
 el.setAttribute("height", rectHeight);
 el.setAttribute("stroke", "black");
 el.setAttribute("stroke-width", "2");
 el.setAttribute("fill", fillColor);  
};
oa.view.rf.shadeSquareParts.handleFractionChooserSubmitNew = function(e) {
  var userInputFieldNum = document.getElementById("askedForNum"),
  userInputFieldDenom = document.getElementById("askedForDenom"),
  answer = [],
  percentageCorrect = 0,
  i = 0;
  if (document.getElementById('square00200200none')) {
	userInputFieldNum.value = finalResult[0];
	userInputFieldDenom.value = finalResult[1];
	oa.view.rf.shadeSquareParts.divideSquare(finalResult[0], finalResult[1]);
	el = document.getElementById("PositionOfSquare");
	el.classList.add("given");
	userInputFieldNum.classList.add("given");
	 e.target.innerHTML = "&#9658;";
  } else if (userInputFieldNum.classList.contains("correct") ||  
      userInputFieldNum.classList.contains("given") ) {  
    // click continue event
    userInputFieldNum.classList.remove("correct");
    userInputFieldDenom.classList.remove("correct");
    userInputFieldNum.classList.remove("given");
    el = document.getElementById("PositionOfSquare");
    el.classList.remove("correct");
    el.classList.remove("given");
    e.target.className="blue";
    e.target.innerHTML = "?";
    oa.ctrl.continueCurrentExercise();
  } else if (userInputFieldNum.classList.contains("false")) {  // click continue event
	userInputFieldNum.classList.remove("false");
	userInputFieldDenom.classList.remove("false");
    el = document.getElementById("PositionOfSquare");
   	el.classList.remove("false");
	e.target.className="blue";
	e.target.innerHTML = "?";
  }else{  
	answer[0] = parseInt( userInputFieldNum.value);  
	answer[1] = parseInt( userInputFieldDenom.value);
	if (oa.ctrl.evaluateFraction( answer)) {
	  userInputFieldNum.classList.add("correct");
	  userInputFieldDenom.classList.add("correct");
	  el = document.getElementById("PositionOfSquare");
	  el.classList.add("correct");
	  e.target.innerHTML = "&#9658";
	} else {
	  userInputFieldDenom.classList.add("false");
	  userInputFieldNum.classList.add("false");
	  el = document.getElementById("PositionOfSquare");
	  el.classList.add("false");
	}
  }
};
oa.view.rf.shadeSquareParts.handleUserInputFractionChooser = function(e) {
  var userInputFieldNum = document.getElementById("askedForNum"),
  userInputFieldDenom = document.getElementById("askedForDenom");
  var el = document.getElementById("PositionOfSquare");
  el.classList.remove("correct");
  el.classList.remove("false");
  el.classList.remove("given");
  userInputFieldNum.classList.remove("correct");
  userInputFieldNum.classList.remove("false");
  userInputFieldDenom.classList.remove("correct");
  userInputFieldDenom.classList.remove("false");
};